<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { graphic } from "echarts/core";
import { countUserNum } from "@/api";
import {ElMessage} from "element-plus"
import { dianwei } from "@/api/daping/index.js";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const props = withDefaults(
    defineProps<{
        config: object | any;
        data: Array<{
            name: string;
            value: string | number;
        }>;
    }>(),
    {
        config: () => { },
        data: () => [],
    }
);
watch(
    () => props.data,
    (newval: any) => {
        //calcData();
    },
);

onMounted(() => {
  
});



const datainfo = ref([]);
const dataleft  = ref([]);
const dataright  = ref([]);
const getData1 = () => {
  dianwei(props.data)
  .then((res) => {
      if (res.data) {
        
        datainfo.value = res.data;
        dataleft.value.push({
          name: "点位数",
          value: datainfo.value.point_location_count
        });
        dataleft.value.push({
          name: "绑定数",
          value: datainfo.value.bind_count
        });
        
        setOption();
        

      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
getData1();

let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
const option = ref({});
const option2 = ref({});
const state = reactive({
  lockNum: 0,
  offlineNum: 0,
  onlineNum: 0,
  alarmNum: 0,
  totalNum: 0,
});
const echartsGraphic = (colors: string[]) => {
  return new graphic.LinearGradient(1, 0, 0, 0, [
    { offset: 0, color: colors[0] },
    { offset: 1, color: colors[1] },
  ]);
};


const setOption = () => {
  option.value = {
    title: {
    text: '点位数据',
    //subtext: 'Fake Data',
    left: 'center',
    textStyle: {
      color: '#fff' // 标题文字颜色
    }
  },
  tooltip: {
    trigger: 'item',
    
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: {
            color: '#fff' // 设置字体颜色为白色
        }
  },
  series: [
    {
      name: '点位',
      type: 'pie',
      radius: '70%',
      data: dataleft,
      label: {
      color: '#fff' // 设置标签文字颜色为白色
    },
      
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
  };
};

</script>

<template >
 <div class="flex-container">
    <v-chart class="chart" :option="option" />
  
  </div>
  
</template>

<style scoped lang="scss">

.flex-container {
  display: flex;          /* 启用 Flexbox */
  flex-direction: row; /* 从左到右 */
  gap: 0px;              /* 组件间距 */
  /* 可选：控制溢出行为 */
  overflow-x: none;
  height: 250px;

}
.chart {
  flex: 1; /* 让每个图表平均分配空间 */
  min-width: 0; /* 防止图表因内容过多而溢出 */
  height: 250px; /* 必须为 ECharts 指定高度 */
}
</style>
